<template>
  <div>
    <div class="header">
      <div class="header-shoulder"></div>
      <div class="header-center">{{ tabPageName }}</div>
      <div class="header-shoulder"></div>
    </div>
    <div class="page-container">
      <RouterView></RouterView>
    </div>
    <div class="footer">
      <RouterLink
        v-for="(nav, index) in navigation_list"
        :key="index"
        class="navigator-box"
        active-class="navigator-box-active"
        :to="nav.target"
      >
        <div class="nav-tab">
          <div class="nav-tab-icon">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="nav.icon"></use>
            </svg>
          </div>
          <div class="nav-tab-name">{{ nav.tabName }}</div>
        </div>
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue';
  import { RouterView, RouterLink, useRoute } from 'vue-router';
  
  // 导航栏列表项
  const navigation_list = reactive([
    {
      tabName: "首页",
      target: "/home/main",
      icon: "#icon-a-shouye-fuben_shouye",
    },
    {
      tabName: "账单",
      target: "/home/edit",
      icon: "#icon-jizhang1",
    },
    {
      tabName: "统计",
      target: "/home/data",
      icon: "#icon-tongjifenxi-xiangmubiaogetongji",
    },
    {
      tabName: "用户",
      target: "/home/user",
      icon: "#icon-wode",
    },
  ]);
  const route = useRoute();
  let tabPageName = computed(() => {
    return route.name;
  });

</script>

<style lang="scss" scoped>
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: $theme-main;
    z-index: 100;
    .header-shoulder{
      float: left;
      width: 25%;
      height: 50px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .header-center{
      float: left;
      width: 50%;
      height: 50px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 17px;
      font-weight: 500;
    }
  }
  .page-container{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 60px;
  }
  .footer{
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: white;
    box-shadow: 0 -1px 5px $theme-shadow00;
    z-index: 100;
    .navigator-box{
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 60px;
      cursor: pointer;
    }
    .navigator-box-active{
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 60px;
      color: $theme-main;
      cursor: pointer;
    }
    .navigator-box:hover{
      background-color: $theme-shadow00;
    }
  }
  .nav-tab{
    width: 60px;
    height: 60px;
    .nav-tab-icon{
      line-height: 35px;
      text-align: center;
      font-size: 19px;
    }
    .nav-tab-name{
      line-height: 15px;
      text-align: center;
      font-size: 13px;
    }
  }
</style>